<template>
  <div>
    <div v-if="$store.state.Fog" class="regist">
      <h2 style="padding: 0 5px 5px">忘记密码</h2>
      <div class="components-input-demo-presuffix">
        <a-form :form="form" @submit="handleSubmit">
          <a-form-item v-bind="formItemLayout">
            <span slot="label"> 账号 </span>
            <a-input
              v-decorator="[
                'loginName',
                {
                  rules: [
                    {
                      required: true,
                      message: 'Please input your nickname!',
                      whitespace: true,
                    },
                  ],
                },
              ]"
              placeholder="请输入账号"
            />
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="密码" has-feedback>
            <a-input
              v-decorator="[
                'password',
                {
                  rules: [
                    {
                      required: true,
                      pattern: '^(?![^a-zA-Z]+$)(?!\\\\D+$).{8,16}$',
                      message: 'Please input your password!',
                    },
                    {
                      validator: validateToNextPassword,
                    },
                  ],
                },
              ]"
              placeholder="请输入8到16位包括字母的密码"
              type="password"
            />
          </a-form-item>
          <a-form-item v-bind="formItemLayout" label="确认密码" has-feedback>
            <a-input
              v-decorator="[
                'confirm',
                {
                  rules: [
                    {
                      required: true,
                      message: '请与密码一致',
                    },
                    {
                      validator: compareToFirstPassword,
                    },
                  ],
                },
              ]"
              type="password"
              placeholder="请输入确认密码"
              @blur="handleConfirmBlur"
            />
          </a-form-item>
          <a-form-item v-bind="formItemLayout" label="手机号码">
            <a-input
              ref="phone"
              v-decorator="[
                'phone',
                {
                  rules: [{ required: true, message: '请正确输入您的手机号' }],
                },
              ]"
              placeholder="请输入手机号"
              style="width: 100%"
            >
              <a-select
                slot="addonBefore"
                v-decorator="['prefix', { initialValue: '86' }]"
                style="width: 70px"
              >
                <a-select-option value="86"> +86 </a-select-option>
                <a-select-option value="87"> +87 </a-select-option>
              </a-select>
            </a-input>
          </a-form-item>
          <a-form-item v-bind="formItemLayout" label="验证码">
            <a-row :gutter="8">
              <a-col :span="12">
                <a-input
                  v-decorator="[
                    'captcha',
                    { rules: [{ required: true, message: '请输入验证码' }] },
                  ]"
                />
              </a-col>
              <a-col :span="12">
                <a-button @click="indenCode" :disabled="disable"
                  >获取验证码</a-button
                >
              </a-col>
            </a-row>
          </a-form-item>
          <a-form-item v-bind="tailFormItemLayout">
            <a-row :gutter="8">
              <a-col :span="12">
                <a-button type="primary" html-type="submit"> 确定 </a-button>
              </a-col>
              <a-col :span="4"></a-col>
              <a-col
                :span="8"
                @click="$store.commit('changeReg', { reg: false })"
              >
                <a-icon type="arrow-right" />
                去登录
              </a-col>
            </a-row>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script>
import { phoneCode, forget } from "../api/api";

const residences = [
  {
    value: "zhejiang",
    label: "Zhejiang",
    children: [
      {
        value: "hangzhou",
        label: "Hangzhou",
        children: [
          {
            value: "xihu",
            label: "West Lake",
          },
        ],
      },
    ],
  },
  {
    value: "jiangsu",
    label: "Jiangsu",
    children: [
      {
        value: "nanjing",
        label: "Nanjing",
        children: [
          {
            value: "zhonghuamen",
            label: "Zhong Hua Men",
          },
        ],
      },
    ],
  },
];

export default {
  name: "FogPsw",
  data() {
    return {
      disable: false,
      confirmDirty: false,
      residences,
      autoCompleteResult: [],
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0,
          },
          sm: {
            span: 16,
            offset: 8,
          },
        },
      },
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "register" });
  },
  methods: {
    indenCode() {
      phoneCode(this.$refs.phone.value).then(() => {
        // console.log(res)
        this.flog = true;
        clearInterval(this.timer);
        this.timer = setInterval(() => {
          this.num--;
          if (this.num <= 0) {
            this.msg = "重新获取验证码";
            clearInterval(this.timer);
            this.num = 60;
            this.flog = false;
          } else {
            this.msg = this.num + "秒重新获取";
          }
        }, 1000);
      });
    },
    // export function forget(loginName, code, phonenumber, password) {
    //     let params = new URLSearchParams()
    //     params.append('loginName', loginName)
    //     params.append('code', code)
    //     params.append('phonenumber', phonenumber)
    //     params.append('password', password)
    //     const url = '/api/password/forget'
    //     return http.post(url, params)
    // }
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          // console.log('Received values of form: ', values);
          forget(
            values.loginName,
            values.captcha,
            values.phone,
            values.password
          ).then((res) => {
            if (res.code === 0) {
              this.$store.commit("changeFog", { Fog: false });
              this.$router.push("/login");
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
    handleConfirmBlur(e) {
      const value = e.target.value;
      this.confirmDirty = this.confirmDirty || !!value;
    },
    compareToFirstPassword(rule, value, callback) {
      const form = this.form;
      if (value && value !== form.getFieldValue("password")) {
        callback("Two passwords that you enter is inconsistent!");
      } else {
        callback();
      }
    },
    validateToNextPassword(rule, value, callback) {
      const form = this.form;
      if (value && this.confirmDirty) {
        form.validateFields(["confirm"], { force: true });
      }
      callback();
    },
    handleWebsiteChange(value) {
      let autoCompleteResult;
      if (!value) {
        autoCompleteResult = [];
      } else {
        autoCompleteResult = [".com", ".org", ".net"].map(
          (domain) => `${value}${domain}`
        );
      }
      this.autoCompleteResult = autoCompleteResult;
    },
  },
};
</script>

<style scoped lang="less">
.regist {
  width: 100%;
  margin-top: -40px;
  h2 {
    text-align: center;
  }
}
.ant-btn {
  width: 100%;
  height: 50px;
  border-color: rgb(64, 169, 255);
  background-color: rgb(64, 169, 255);
  color: #f7f8fa;
}
.ant-btn:active {
  background-color: white;
  color: rgb(64, 169, 255);
}
</style>